import React, {Component} from 'react'
import MyReplyVM from 'cvm/mine/myReply'
import { observer } from 'mobx-react/custom'
import { NavLink as Link } from 'react-router-dom'
import LoadMore from 'components/common/loadMore'
import Cover from 'components/common/cover'
import Refresh from 'components/common/refresh'

const Content = observer(({ vm, icon }) => {
  if (vm.pageInfo.status !== 'loading' && vm.data.length === 0) {
    return <div className='nothing-count'>暂无数据</div>
  } else if (vm.data.length > 0) {
    return (
      <div className='bean-record-box'>
        {vm.data.map((item, index) => {
          return (
            <div key={index} className='replay-box replay-box-color '>
              <div className='register-box-left'>
                <img src={icon} alt='' />
              </div>
              <div className='register-box-right'>
                <Link to={'mainText?' + item.PostID}>
                  <p className='replay-name-box'>
                    <span className='name'>我</span>
                    <span className='reply'>回复</span>
                    <span className='me'>{item.Nickname}</span>
                  </p>
                  <p className='reply-text'>{item.Content}</p>
                  <div className='my-texts'>
                    <span>{item.Nickname}:&nbsp;</span>
                    <p>{item.PostContent}</p>
                  </div>
                </Link>
                <div className='flex-wrap'>
                  <p className='time flex-1'>{item.CreateTime}</p>
                  <p onClick={() => vm.handleMore(item)} className='more flex-1 delete-replay'>
                    <img src={require('images/more.png')} alt='' />
                  </p>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  } else {
    return <div />
  }
})

const DeleteCover = observer(({ vm }) => {
  return (
    <Cover visible={vm.coverVisible}>
      <div onClick={vm.handleDelete} className='collection'>删除</div>
      <div onClick={vm.handleHideCover} className='cancel'>取 消</div>
    </Cover>
  )
})

@observer
export default class MyReply extends Component {
  vm = new MyReplyVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '我的回复'
    let search = this.props.location.search
    this.icon = search.substr(1, search.length - 1) || ''
  }

  render () {
    return (
      <div>
        <Refresh onRefresh={this.vm.data.length > 5 && this.vm.handleRefresh}>
          <Content vm={this.vm} icon={this.icon} />
          <DeleteCover vm={this.vm} />
          {this.vm.pageInfo.page !== 1 &&
            <LoadMore status={this.vm.pageInfo.status}
              handleLoadMore={this.vm.handleLoadMore} />
          }
        </Refresh>
      </div>
    )
  }
}
